import { useEffect } from 'react'

import { getKindListData } from './api/kind'

import { useDispatch, useSelector } from 'react-redux'

import { changeKindList } from './store/modules/kind'

export default function Kind() {

    const dis = useDispatch()

    const kindList = useSelector(state => state.kind.kindList)

    useEffect(() => {
        getKindListData().then(res => {
            // console.log(res.data.data);
            dis(changeKindList(res.data.data))
        })
    })

    return (
        <div>
            <ol>
                {kindList && kindList.map(item => {
                    return <li key={item}> {item} </li>
                })}
            </ol>
        </div>
    )
}
